<template>
    <div class="show">
        <div id="navsides">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="true">收起</el-radio-button>
            <el-radio-button :label="false">展开</el-radio-button>
        </el-radio-group>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
            <el-submenu :index="item.menuId" v-for="item in getList">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.menuName}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index='ele.menuId' v-for="ele in item.children">
                        <router-link :to='ele.router'>{{ele.menuName}}</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        </div>         
        <div>
            <router-view></router-view>
        </div>
        
    </div>
</template>
<script>
  export default {
    data() {
      return {
        isCollapse: false,
        getList:[]
      };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        getNav(){
            var url = "/xc/user/queryMenu";
            this.axios.get(url).then(res=>{
                console.log(22222)
                this.getList = res.data.data
                console.log(this.getList)
            })
        }
    },
    mounted(){
        this.getNav()
    }
  };
</script>
<style>
    div.show{
        display: flex !important;
    }
   div#navsides{
       width: 200px !important;
   }
    /* .navside{
        list-style: none;
        background: #8BA5E8;
        color: white;
        width: 140px;
        height: 240px;
        box-sizing: border-box;
        display: flex;
        border-radius: 10px;
        flex-direction: column;
        justify-content: space-around;
        text-align: left;
        padding-left: 30px;
        position: fixed;
        margin: 0;
    } */
    ul>li{
        margin: 2rem 0;
    }
    ul>li>a{
        text-decoration: none !important;
        color: #000000;
    }   
    .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    }
    div#app{
        text-align: left;
    }
    .el-menu-item-group__title{
        padding: 0 !important;
    }
    .el-menu-item{
        margin: 0 !important;
    }
    .el-menu-item-group{
        margin: 0 !important;
    }
    .el-menu-vertical-demo{
        border:none !important;
    }
</style>